<template>
  <div>
    <el-switch v-model="show" @click="show = !show" active-color="#13ce66"></el-switch><span style="margin-left: 10px; vertical-align: middle;">{{show ? "打开弹幕" : "关闭弹幕"}}</span>
    <div class="danmuBox" v-show="show">
      <DanMu @enterMsg="onEnterMsg" :danmus="danmus"></DanMu>
    </div>
  </div>
</template>

<script>
import { sendMessageByClient } from "@/util/msgjs/addSocketMsg";
import DanMu from "@/components/DanMu/danmu";
import { mapState } from "vuex";
export default {
  components: {
    DanMu,
  },
  data() {
    return {
      roomName: `currNo_`,
      danmus: [],
      show: false
    };
  },
  props:{
    currNo: Number
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      socketClient: (state) => state.danmu.socketClient,
    }),
    client() {
      return this.socketClient;
    },
  },
  methods: {
    open2(result) {
      let msg = result.data.message;
      if (result.data && result.data.type == "danmu") {
        if (msg) {
          this.danmus = this.danmus.concat(msg); //msg //
        } else {
          this.danmus = this.danmus.push(msg); //[msg][msg] //
        }
      } else {
        if (msg instanceof Array) {
          msg = msg.join(); //合并
        }
        this.$notify({
          title: '消息',
          message: msg,
          position: 'bottom-right'
        });
      }
    },
    onEnterMsg(msg) {
      if (this.client) {
        sendMessageByClient(
          {
            message: (this.userInfo.realName || this.userInfo.email || this.userInfo.nickName || this.userInfo.stuNum || "其它用户") + ":" + msg,
            roomName: this.roomName + this.currNo,
            type: "danmu",
          },
          this.client
        );
      }
    },
  },
  async mounted() {
    await this.$store.dispatch("danmu/socketClientInit", {
      handler: this.open2,
      roomName: this.roomName + this.currNo,
    });
  },
  beforeDestroy() {
    if (this.client) {
      this.client.closing();
    }
  },
};
</script>